import {
    AlertTriangle,
    Ban,
    CircleAlert,
    CircleCheckBig,
    FileText,
    Info,
    Lightbulb,
} from 'lucide-react';

import { cn } from '@/lib/utils';

interface CalloutProps {
    twClass?: string;
    children?: React.ReactNode;
    type?: keyof typeof dataCallout;
}

const dataCallout = {
    default: {
        icon: Info,
        classes:
            'border-zinc-200 bg-gray-50 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-200',
    },
    danger: {
        icon: CircleAlert,
        classes:
            'border-red-200 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-200',
    },
    error: {
        icon: Ban,
        classes:
            'border-red-200 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-200',
    },
    idea: {
        icon: Lightbulb,
        classes:
            'border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200',
    },
    info: {
        icon: Info,
        classes:
            'border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200',
    },
    note: {
        icon: FileText,
        classes:
            'border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200',
    },
    success: {
        icon: CircleCheckBig,
        classes:
            'border-green-200 bg-green-50 text-green-800 dark:bg-green-400/20 dark:text-green-300',
    },
    warning: {
        icon: AlertTriangle,
        classes:
            'border-orange-200 bg-orange-50 text-orange-800 dark:bg-orange-400/20 dark:text-orange-300',
    },
};

export function Callout({
    children,
    twClass,
    type = 'default',
    ...props
}: CalloutProps) {
    const { icon: Icon, classes } = dataCallout[type];
    return (
        <div
            className={cn(
                'mt-6 flex items-start space-x-3 rounded-lg border px-4 py-3 text-[15.6px] dark:border-none',
                classes,
                twClass,
            )}
            {...props}
        >
            <div className="mt-1 shrink-0">
                <Icon className="size-5" />
            </div>
            <div className="[&>p]:my-0">{children}</div>
        </div>
    );
}
